<template>
  <van-button :color="btnColor" @click="handleClick">{{ btnText }}</van-button>

  <!--退回理由-->
  <van-dialog
    v-model:show="showRefuseReasonDialog"
    title="填写退回理由"
    show-cancel-button
    teleport="body"
    :confirmButtonDisabled="refuseReasonConfirmButtonDisabled"
    @confirm="handleRefuseReason"
  >
    <van-popover
      v-if="refuseReasonList && refuseReasonList.length > 0"
      :actions="refuseReasonList"
      placement="top"
      @select="refuseTemplateSelect"
    >
      <template #reference>
        <van-field
          v-model="refuseReasonDialogParams.processMessageTypeStr"
          name="退回模板"
          label="退回模板"
          placeholder="请选择退回模板"
          required
          readonly
          is-link
          label-align="right"
          :border="false"
        />
      </template>
    </van-popover>
    <van-field
      v-model="refuseReasonDialogParams.processMessage"
      name="退回理由"
      label="退回理由"
      placeholder="请输入退回理由"
      :required="refuseProcessMessageRequired"
      label-align="right"
      :border="false"
      rows="1"
      autosize
      type="textarea"
    />
  </van-dialog>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { showConfirmDialog, showSuccessToast } from "vant";
import QianzhikongApi from "@/api/qianzhikong-api";

export default defineComponent({
  name: "RefuseBtn",
  components: {},
  props: {
    info: Object,
    btnText: {
      type: String,
      default: "退回",
    },
    btnColor: {
      type: String,
      default: "#f00",
    },
    codeType: String,
    successToastMsg: {
      type: String,
      default: "成功",
    },
  },
  data() {
    return {
      showRefuseReasonDialog: false,
      refuseReasonDialogParams: {},
      refuseProcessMessageRequired: false,
      refuseReasonList: [],
    };
  },
  computed: {
    refuseReasonConfirmButtonDisabled() {
      if (!this.codeType) {
        return !this.refuseReasonDialogParams.processMessage;
      }

      if (!this.refuseProcessMessageRequired) {
        return !this.refuseReasonDialogParams.processMessageTypeId;
      }

      return (
        !this.refuseReasonDialogParams.processMessageTypeId ||
        !this.refuseReasonDialogParams.processMessage
      );
    },
  },
  watch: {},
  beforeCreate() {},
  created() {
    if (this.codeType) {
      QianzhikongApi.buildBasicSelectListData(`mCodeType=${this.codeType}`, {
        mCodeType: this.codeType,
      }).then((data) => {
        this.refuseReasonList = data.map((item) => ({
          text: item.name,
          value: item.value,
        }));
      });
    } else {
      this.refuseProcessMessageRequired = true;
    }
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  methods: {
    handleClick() {
      showConfirmDialog({
        title: "确认",
        message: "您确认要退回吗？",
      }).then(() => {
        this.showRefuseReasonDialog = true;
      });
    },
    refuseTemplateSelect(data) {
      QianzhikongApi.isOtherMessage({
        id: data.value,
        type: this.codeType,
      }).then(({ entity }) => {
        if (entity) {
          this.refuseProcessMessageRequired = true;
        } else {
          this.refuseReasonDialogParams.processMessage = data.text;
        }
        this.refuseReasonDialogParams.processMessageTypeId = data.value;
        this.refuseReasonDialogParams.processMessageTypeStr = data.text;
      });
    },
    handleRefuseReason() {
      QianzhikongApi.approveConsultationApply(this.info, {
        processAction: "refuse",
        processMessage: this.refuseReasonDialogParams.processMessage,
      }).then(() => {
        showSuccessToast({
          message: this.successToastMsg,
          duration: 2000,
          onClose: () => {
            this.$router.back();
          },
        });
      });
    },
  },
  beforeUnmount() {},
  unmounted() {},
});
</script>

<style scoped lang="scss">
.van-button {
  flex: 1;
}

.van-popup {
  z-index: 1000;
  width: 50%;

  :deep(.van-popover__action) {
    width: 100%;
  }
}
</style>
